<template>
  <div>
    <div class="boxs">
      <a-descriptions title="用户管理">
        <a-descriptions-item label="当前用户名">{{user.alias}}</a-descriptions-item>
        <a-descriptions-item label="用户邮箱">{{user.username}}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{user.createTime}}</a-descriptions-item>
        <a-descriptions-item
          label="修改密码:"
        ><el-link type="danger" @click="xiugailonin(user)">点击修改密码</el-link></a-descriptions-item>        
        <!-- <a-descriptions-item
          label="用户权限详情"
        >No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item> -->
      </a-descriptions>
    </div>
    <div style="width: 80%;margin: auto;height:80px;">
      <a-checkable-tag
        @change="handleChange"
        style="font-size: 25px"
      >用户列表,点击添加角色或用户:</a-checkable-tag>
    </div>
    <div style="width: 80%;margin: auto;">
      <a-list item-layout="horizontal" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta
            :description="item.alias"
          >
            <a slot="title" href="/UserorRole?name=查看用户">{{ item.username }}</a>
            <a-avatar
              slot="avatar"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <p style="font-size: 25px">.....</p>
    </div>
    <!-- 修改框 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="当前用户名" :label-width="formLabelWidth">
          <el-input disabled v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="旧密码:" :label-width="formLabelWidth" >
          <el-input disabled v-model="form.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码:" :label-width="formLabelWidth" >
          <el-input v-model="form.newPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const data = [];
import UserorRoleget from "../api/UserorRole";
import usermanagementget from "../api/usermanagement";
import login from "../api/login";
export default {
  data() {
    return {
      data,
      dialogFormVisible: false,
      user: {
        alias: "",
        username: "",
        createTime: "",
      },
      password:'',
      form:{
        newPassword:"",
      },
      formLabelWidth:'100px',
    };
  },
  created(){
    this.dataget();
    this.loginget();
  },
  methods: {
    handleChange() {
      this.$router.push("/UserorRole?name=查看用户");
    },
    userget(){
      // usermanagement.Uget()
      usermanagementget.Roleget().then(res=>{
        console.log(res)
      })
    },
    // 获取当前用户信息
    loginget(){
      login.danglogin().then(res=>{
        if(res.data.code === 20000){
          this.user = res.data.user
          // console.log(res)
        }
        if(this.$route.query.user == 1){
          this.xiugailonin(res.data.user)
        }
      })
    },
    // 用户列表预览
    dataget() {
      data.splice(0, data.length);
      UserorRoleget.Roleget().then(res => {
        console.log(res)
        for (var i = 0; i < 3; i++) {
          data.push(res.data.list.list[i]);
        }
      });
    },
    // 修改密码
    xiugailonin(user){
      this.dialogFormVisible = true
      this.form = user
    },
    // 确定修改密码
    queding(){
      this.$confirm('确定修改您的密码吗 ?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
      // 确定
      .then(() => {
          const users = {
            userId:this.form.userId,
            password:this.form.password,
            newPassword:this.form.newPassword,
          }
          console.log(users)
          UserorRoleget.Rolexiugaiput(users).then(res => {
            if(res.data.code === 500){
              alert(res.data.msg)
            }
            if(res.data.code === 20000){
              alert('修改成功，请重新登录')
              localStorage.clear();
              location.reload();
            }
          });
      })
      // 取消
      .catch(() => {})
    },
  },
};
</script>

<style scoped>
.boxs {
  width: 80%;
  height: 250px;
  margin: auto;
}
</style>
